<template>
    <div>
        <NavTop />
        <div style="width: 1400px;margin: auto;">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column label="商品编号" width="120" property="id"></el-table-column>
                <el-table-column property="name" label="商品名称" width="300" />
                <el-table-column property="price" label="商品价格" />
                <el-table-column property="onlineprice" label="优惠价格" />
                <el-table-column property="num" label="数量" />
                <el-table-column property="total" label="总金额" />

                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <br>
            <el-button @click="buy()">购买</el-button>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { useGoodsStore } from '@/store/goods';
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    components:{
        NavTop
    },
    data() {
        return {
            multipleTableRef:null,
            multipleSelection :[],
            tableData:JSON.parse(sessionStorage.getItem('cart')),
            store:useGoodsStore(),
            time:new Date(),
            orderID:'',
            sum:0,
            num:0
        }
    },
    // mounted(){
    //     this.tableData = this.store.cartData
    // }
    methods:{
        handleDelete(index){
            ElMessageBox.confirm(
                '确定要删除这个物美价廉的商品吗?',
                '警告',
                {
                confirmButtonText: '当然了',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            )
            .then(() => {
                    this.tableData.splice(index,1)
                    sessionStorage.setItem('cart',JSON.stringify(this.tableData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
            }) 
        },
        buy(){
            if(this.multipleSelection==''){
                alert("请选中要购买的商品")
            }else{
            //打印订单号
            this.orderID=this.time.getFullYear().toString() + (this.time.getMonth()+1).toString() + this.time.getDate().toString() + 
            Math.random().toString().slice(2,10)
            console.log(this.orderID);
            //统计商品总金额和总数量
            //从选中的商品中进行循环遍历，把每个商品的数量和金额相加。注意，我们选中的商品时放在multiSelection数组中。
            this.multipleSelection.map(v=>{
                this.num += v.num
                this.sum += parseFloat(v.total) // 强制转换为浮点型
            })
            //验证一下sum和num数据是否ok
            console.log(this.num);
            console.log(this.sum);
            
            //把商品信息添加到订单数组中去
            this.store.orderAdd({
                orderID:this.orderID,
                time:new Date(),
                num:this.num,
                sum:this.sum,
                isOrdered:false,//设置一个变量，用来记录订单支付运算
                child:[...this.multipleSelection] //展开运算符，通常用来把一个数组逐一进行操作，相当于进行了循环
            })


            //打印订单数组，过程性检查
            console.log(this.store.orderData);
            //在购物车中删除已经购买的商品
            this.multipleSelection.forEach(list=>{
                //找到购物车数组中与选中商品的商品编号一致的商品。然后把这个商品的下标
                let x = this.tableData.findIndex(item=>item.id==list.id)
                this.tableData.splice(x,1)
                sessionStorage.setItem('cart',JSON.stringify(this.tableData))

            })




            ElMessageBox.alert('订单已生成，请前往订单页面完成支付！', '亲亲', {
                confirmButtonText: '知道了',  
            })
        }
        },
        handleSelectionChange(val){
            this.multipleSelection = val //把选中的商品放入到这个数组中
        }
    },
}
</script>